<template>
	<Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
		<slot></slot>
	</Scrollbar>
</template>

<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue';
import { Scrollbar, ScrollbarType } from '#/Scrollbar';
import { useScrollTo } from '@/hooks/event/useScrollTo';

export default defineComponent({
	name: 'ScrollContainer',
	components: { Scrollbar },
	setup() {
		const scrollbarRef = ref<Nullable<ScrollbarType>>(null);

		/**
		 * Scroll to the specified position
		 */
		function scrollTo(to: number, duration = 500) {
			const scrollbar = unref(scrollbarRef);
			if (!scrollbar) {
				return;
			}
			nextTick(() => {
				const wrap = unref(scrollbar.wrap);
				if (!wrap) {
					return;
				}
				const { start } = useScrollTo({
					el: wrap,
					to,
					duration,
				});
				start();
			});
		}

		function getScrollWrap() {
			const scrollbar = unref(scrollbarRef);
			if (!scrollbar) {
				return null;
			}
			return scrollbar.wrap;
		}

		/**
		 * Scroll to the bottom
		 */
		function scrollBottom() {
			const scrollbar = unref(scrollbarRef);
			if (!scrollbar) {
				return;
			}
			nextTick(() => {
				const wrap = unref(scrollbar.wrap) as any;
				if (!wrap) {
					return;
				}
				const scrollHeight = wrap.scrollHeight as number;
				const { start } = useScrollTo({
					el: wrap,
					to: scrollHeight,
				});
				start();
			});
		}

		return {
			scrollbarRef,
			scrollTo,
			scrollBottom,
			getScrollWrap,
		};
	},
});
</script>
<style lang="less">
.scroll-container {
	width: 100%;
	height: 100%;

	.scrollbar__wrap {
		margin-bottom: 18px !important;
		overflow-x: hidden;
	}

	.scrollbar__view {
		box-sizing: border-box;
	}
}
</style>
